<template>
  <div class="layout-container">
    <!-- 左侧栏 -->
    <div class="left-panel" :style="{ width: leftWidth + 'px' }">
      <el-tabs v-model="func">
        <el-tab-pane label="功能" name="function">
          <el-menu default-active="1-4-1" class="el-menu-vertical-demo">
            <el-submenu index="1">
              <template slot="title">
                <span slot="title">路由</span>
              </template>
              <el-menu-item index="1-2">功能1</el-menu-item>
              <el-menu-item index="1-3">功能2</el-menu-item>
              <el-menu-item index="1-4">功能3</el-menu-item>
              <el-menu-item index="1-5">功能4</el-menu-item>
              <el-menu-item index="1-6">功能5</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-tab-pane>
        <el-tab-pane label="组件" name="component">
          <el-row>
            <my-draggable :componentList="componentList" :pull="pull" :put="false"
                          @handlePush="handlePush"></my-draggable>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 左侧与中间的分割线 -->
    <el-divider direction="vertical" class="divider" @mousedown="startDrag('left')"></el-divider>

    <!-- 中间内容 -->
    <div class="center-panel">
      <div class="center-canvas" id="centerCanvas">
        <el-col>
          <!--面包屑导航-->
          <el-row style="padding: 25px;border-bottom: darkgray solid 1px">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item style="font-weight: 700">功能</el-breadcrumb-item>
              <el-breadcrumb-item><a href="#/Index">活动管理</a></el-breadcrumb-item>
            </el-breadcrumb>
          </el-row>
          <!--动态事件绑定-->
          <el-row>
            <el-col style="height: 82vh;overflow-y: auto;">
              <my-main-draggable :componentList="componentMainList"
                                 @showDetailRight="showDetailRight"></my-main-draggable>
            </el-col>
          </el-row>
        </el-col>
      </div>
    </div>

    <!-- 中间与右侧的分割线 -->
    <el-divider direction="vertical" class="divider" @mousedown="startDrag('right')">

    </el-divider>
    <!-- 右侧栏 -->
    <div class="right-panel" :style="{ width: rightWidth + 'px' }">
      <my-right-draggable @handleChangeObj="handleChangeObj" :component="component" :rightObj="rightObj"></my-right-draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import MyElRow from '@/components/components/MyIcon'
import MyDraggable from "@/components/system/MyLeftDraggable";
import MyMainDraggable from "@/components/system/MyMainDraggable";
import MyRightDraggable from "@/components/system/MyRightDraggable";
import {login} from "@/utils";

export default {
  data() {
    return {
      rightObj: {},
      rightIndex: -1,
      pull: 'clone',
      func: 'component',
      component: 'detail',
      leftWidth: 300,  // 左侧初始宽度
      rightWidth: 400, // 右侧初始宽度
      dragging: false, // 是否正在拖拽
      activePanel: null, // 当前正在调整的面板
      componentMainList: [],
      componentList: [
        {
          is: 'MyContainer',
          componentType: 'container',
          show: true
        },
        {
          is: 'MyInput',
          componentType: 'input',
          labelText: '输入框1',
          defaultValue: '默认值',
          placeholder: '请输入',
          type: 'text',
          show: true
        },
        {
          is: 'MyTable',
          componentType: 'table',
          type: 'self',
          tableData: [
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }
          ],
          columns: [
            {
              prop: "date",
              label: "日期",
              width: "150"
            },
            {
              prop: "name",
              label: "姓名",
              width: "150"
            },
            {
              prop: "address",
              label: "地址",
              width: "150"
            },
          ],
          show: true
        },
        {
          is: 'MyButton',
          componentType: 'button',
          labelValue: '添加',
          type: 'primary',
          show: true
        },
        {
          is: 'MyIcon',
          componentType: 'icon',
          iconClass: 'el-icon-delete',
          show: true
        },
        {
          is: 'MyLink',
          componentType: 'link',
          labelValue: '超链接',
          target: '_blank',
          type: 'primary',
          href: 'https://www.baidu.com',
          show: false
        },
        {
          is: 'MyRadio',
          componentType: 'radio',
          labelValue: '单选1',
          labelText: '单选',
          labelModel: 'radio',
          show: false
        }
      ]
    };
  },
  components: {
    MyRightDraggable,
    MyMainDraggable,
    MyDraggable,
    MyElRow,
    draggable
  },
  created() {
    login().then().catch().finally(console.log('调用数据'))
  },
  methods: {
    // 拖拽 start
    startDrag(panel) {
      this.dragging = true;
      this.activePanel = panel;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(e) {
      if (!this.dragging) return;
      const containerWidth = this.$el.clientWidth;
      if (this.activePanel === 'left') {
        this.leftWidth = Math.min(e.clientX, containerWidth - this.rightWidth - 50);
      } else if (this.activePanel === 'right') {
        this.rightWidth = Math.min(containerWidth - e.clientX, containerWidth - this.leftWidth - 50);
      }
    },
    stopDrag() {
      this.dragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    handlePush(item) {
      console.log(item, '获取的数据')
      this.componentMainList.push(JSON.parse(JSON.stringify(item)))
    },
    showDetailRight(item, index) {
      console.log(item, index)
      this.rightIndex = index
      this.rightObj = Object.assign(JSON.parse(JSON.stringify(item)), {})
    },
    handleChangeObj(item) {
      console.log(item, this.componentMainList[this.rightIndex], '输出的数据')
      this.$set(this.componentMainList[this.rightIndex], 'defaultValue', item)
      // this.componentMainList[this.rightIndex].defaultValue = item
    }
  }
};
</script>

<style scoped>
html, body {
  height: 100%; /* 确保html和body占满全屏 */
  margin: 0; /* 去掉默认的margin */
  overflow: hidden; /* 隐藏滚动条 */
}

.layout-container {
  display: flex;
  height: 98vh; /* 高度占满整个页面 */
}

.left-panel, .right-panel, .center-panel {
  padding: 10px;
  box-sizing: border-box; /* 确保padding不会导致溢出 */
}

.left-panel {
  background-color: #ffffff;
}

.center-panel {
  background-color: #dfe6e9;
  flex-grow: 1; /* 中间区域自适应宽度 */
}

.center-canvas {
  background-color: #ffffff;
  width: 100%;
  height: 100%; /* 高度占满整个页面 */
}

.right-panel {
  background-color: #ffffff;
}

.divider {
  cursor: col-resize;
  width: 3px;
  height: 98vh; /* 高度占满整个页面 */
  background-color: #dfe6e9;
  flex-shrink: 0; /* 防止divider挤压导致左右布局溢出 */
}

.component-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 5px 0;
  background-color: #f9f9f9;
  cursor: move;
}

.preview {
  border: 1px dashed #ccc;
  padding: 10px;
  min-height: 100px;
}

.item {
  margin: 10px;
  padding: 10px;
  background: #ffffff;
}


</style>
